<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp" ng-controller="BodyController">
<head>
    <title>Sudo Slider | Options explorer</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>

    <link rel="STYLESHEET" type="text/css" href="css/style.css">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>

    <script type="text/javascript" src="../js/jquery.sudoSlider.js"></script>
    <script type="text/javascript" src="js/events.js"></script>
    <script type="text/javascript" src="js/sudoSliderAngular.js"></script>
    <script type="text/javascript" src="js/exports.js"></script>
    <script type="text/javascript" src="js/optionExplorer.js"></script>

    <style type="text/css" ng-bind="style" ng-if="showInlineSlider"></style>
</head>
<body>
<div class="container">
    <!-- The header -->
    <div class="page-header" style="margin-bottom: 0px;margin-top: 10px;">
        <h1>SudoSlider options explorer <span style="cursor: pointer;" class="glyphicon glyphicon-question-sign" aria-hidden="true" onclick="window.open('popups/help.html', '_blank', 'width=800, height=600')"></span></h1>
        <p class="lead">Change the options and the content, the slider will update immediately.</p>
    </div>

    <!-- The slider -->
    <div class="row" style="border-bottom: 1px solid #eee;" ng-if="showInlineSlider">
        <div style="position:relative;min-height: 241px;margin:10px 10px 10px 20px;">
            <div sudo-slider id="slider">
                <div class="slidesContainer" ng-controller="SudoSliderSlidesController">
                    <div ng-repeat="slide in slides" ng-bind-html="slide.html"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="border-bottom: 1px solid #eee;text-align: center;" ng-if="!showInlineSlider">
        <button class="btn btn-primary" ng-click="setShowInlineSlider(true)" style="margin-bottom: 0px;">Show the slider here again</button>
    </div>

    <div class="row" style="border-bottom: 1px solid #eee;">
        <h3 style="text-align: center;">Control the slider.</h3>
        <div style="text-align: center;margin-bottom: 10px;">
            <button class="btn btn-primary" ng-click="sliderApi.goToSlide('prev')" style="margin-bottom: 0px;">Previous</button>
            <button class="btn btn-primary" ng-click="sliderApi.goToSlide('next')" style="margin-bottom: 0px;">Next</button>
            <button class="btn btn-primary" ng-click="sliderApi.startAuto()" style="margin-bottom: 0px;">Start auto</button>
            <button class="btn btn-primary" ng-click="sliderApi.stopAuto()" style="margin-bottom: 0px;">Stop auto</button>
            <!--<button class="btn btn-primary" ng-click="sliderApi.destroy()" style="margin-bottom: 0px;">Destroy</button>
            <button class="btn btn-primary" ng-click="sliderApi.init()" style="margin-bottom: 0px;">Init</button>-->
        </div>
    </div>

    <!-- Modifying the slider -->
    <div class="row" style="margin-top: 10px;">
        <!-- The options -->
        <div class="col-md-4 well" style="padding: 0 15px 20px">
            <div class="form-group">
                <label><h2>The options</h2></label>
                <input type="text" class="form-control" placeholder="Filter options by name"  ng-model="optionFilter.filter">
            </div>
            <div class="checkbox">
                <label><input type="checkbox" ng-model="filterNonDefault">Hide options with default values</label>
            </div>

            <table class="table table-striped" style="margin-top: 20px;">
                <tbody>
                    <tr ng-repeat="definition in optionDefinitions | filter:optionFilter.filter | nonDefaultValues:filterNonDefault" class="optionDefinition"
                         ng-controller="OptionController">
                        <td>
                            <div ng-if="definition.type == 'boolean'">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="{{definition.name}}" ng-model="definition.value">
                                        {{definition.name}}
                                    </label>
                                </div>
                            </div>
                            <div ng-if="definition.type == 'dropdown'">
                                <div class="btn-group" dropdown>

                                    <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>
                                        {{definition.name}} : {{definition.value}} <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li ng-repeat="value in definition.choices | filter:dropDownFilter">
                                            <a href="javascript:void(0);" ng-click="definition.value = value">{{value}}</a>
                                        </li>
                                    </ul>
                                </div>
                                <div style="margin-top: 7px;">
                                    <label>filter {{definition.name}}s: <input type="text" ng-model="dropDownFilter" class="form-control"> </label>
                                </div>
                            </div>
                            <div ng-if="definition.type == 'number' || definition.type == 'text'">
                                <div class="form-group {{clazz()}}">
                                    <label>
                                        {{definition.name}}:
                                        <input type="text" name="{{definition.name}}" ng-model="definition.value" class="form-control">
                                    </label>
                                </div>

                                <div ng-if="definition.optional">
                                    <label>Enable:
                                        <input type="checkbox" name="{{definition.name}}.enabled" ng-model="definition.enabled" >
                                    </label>

                                </div>
                            </div>
                            <div ng-if="definition.type == 'function'">
                                <label>
                                    {{definition.name}}:
                                <textarea type="text" name="{{definition.name}}" ng-model="definition.stringValue"
                                          ng-change="setOptionFunction(definition.stringValue)" class="form-control" rows="2"></textarea>
                                </label>
                            </div>
                            <div ng-if="definition.type == 'array'">
                                <div class="form-group {{clazz()}}">
                                    <label>
                                        {{definition.name}}:
                                        <input type="text" name="{{definition.name}}" ng-model="definition.stringValue"
                                               ng-change="setstringValue(definition.stringValue)" class="form-control">
                                    </label>
                                </div>

                                <div ng-if="definition.optional">
                                    <label>Enable:
                                        <input type="checkbox" name="{{definition.name}}.enabled" ng-model="definition.enabled">
                                    </label>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Modifying the content of the slider -->
        <div class="col-md-4" style="padding: 0 15px 20px">
            <h2>The content</h2>

            <div id="slides" style="margin-top: 10px;margin-bottom: 10px;">
                <div ng-repeat="slide in slides" style="margin-bottom: 20px;">
                    <!--<label style="position: relative;">-->
                        <h4 style="margin-bottom: 4px;">Slide {{$index + 1}} <button class="btn btn-danger" ng-click="removeSlide($index)">Delete slide</button></h4>
                        <textarea class="form-control" rows="3" ng-model="slide.html" ng-change="sliderApi.adjust()" style="font-weight: bold;"></textarea>
                    <!--</label>-->
                </div>
                <button class="btn btn-primary" ng-click="addSlide()">Add slide</button>
            </div>
        </div>

        <!-- Demo selection, style, import and export -->
        <div class="col-md-4 well" style="padding: 0 15px 20px">
            <h2>The rest</h2>
            <div ng-controller="PopupController" style="margin-bottom: 20px;">
                <button class="btn btn-success" ng-click="openExportPopup()" style="margin-bottom: 20px;">Get the result</button> <br />
                <button class="btn btn-primary" ng-click="openSliderPopup()">Open slider in popup</button>
            </div>

            <!--TODO: Do something with this.-->
            <div ng-controller="DemoLoaderController">
                <div class="btn-group" dropdown>

                    <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>
                        <span ng-if="currentDemo == null">
                            No demo selected
                        </span>
                        <span ng-if="currentDemo != null">
                            Demo: {{curentDemo.name}}
                        </span>

                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-repeat="demo in demoDefiniftions">
                            <a href="javascript:void(0);" ng-click="selectDemo(demo)">{{demo.name}}</a>
                        </li>
                    </ul>
                </div>
            </div>
            <label>
                <h2>The style</h2>
                <textarea class="form-control" rows="4" ng-model="style" ng-change="sliderApi.adjust()"></textarea>
            </label>
            <br />
        </div>
    </div>

</div>
<script type="text/javascript">
    /* Google Analytics, please remove
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-20484420-1']);
     _gaq.push(['_trackPageview']);

     (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
     /* */
</script>
</body>
</html>